<template>
  <div class="app-box">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>我的审批</el-breadcrumb-item>
      <el-breadcrumb-item>审批信息</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 数据 -->
    <el-table :data="userApprove"
              class="el-table-box"
              style="width: 100%; margin-top:20px;font-weight:700"
              :header-cell-style="{textAlign: 'center'}"
              :cell-style="{ textAlign: 'center' }"

              max-height="80%">
      <el-table-column type="index" label="序号" width="80"></el-table-column>
      <el-table-column prop="user.userName" label="申请人姓名" width="100"></el-table-column>
      <el-table-column prop="dept.deptName" label="部门" width="150"></el-table-column>
      <el-table-column prop="userAppCategory.userAppCategoryName" label="内容" width="250"></el-table-column>
      <el-table-column prop="userApproveStatus" label="申请状态" width="180"></el-table-column>
      <el-table-column prop="userApplyDate" label="申请日期" width="180"></el-table-column>
      <el-table-column prop="userApproveFeedback" label="驳回原因" width="250"></el-table-column>
      <el-table-column prop="userApproveCredential" label="申请凭证" width="100"></el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="approve(scope.row)" type="primary" size="small" style="font-size:15px">同意
          </el-button>
          <el-button type="primary" size="small" @click="dialogFormVisible = true" style="font-size:15px">拒绝</el-button>
          <el-dialog title="提交申请" :visible.sync="dialogFormVisible">
            <el-form :model="disApprove">
              <el-form-item label="拒绝反馈" :label-width="formLabelWidth">
                <el-input v-model="disApprove.userApproveFeedback"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="unApprove(scope.row)">确 定</el-button>
            </div>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="审批进度条"
      :visible.sync="processVisible"
      width="60%">
      <el-steps :active="active" :finish-status="finshState" align-center>
        <el-step title="待审批"></el-step>
        <el-step title="已完成"></el-step>
        <el-step title="申请驳回" :description="rejectReason"></el-step>
      </el-steps>
      <span slot="footer" class="dialog-footer">
                <el-button @click="processVisible = false">取 消</el-button>
                <el-button type="primary" @click="processVisible = false">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userApprove: [],
      processVisible: false,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      active: 0,
      rejectReason: '',
      finshState: '',
      userApproveQuery: {
        user: {
          userId: ""
        },
        dept: {
          deptId: ""
        },
        userAppCategory: {
          userAppCategoryId: ""
        },
        userApplyDate: "",
        userApproveDate: "",
        userApproveStatus: '',
        applyDateSince: "",
        applyDateEnd: ""
      },
      disApprove: {
        userApproveId: "",
        userApproveFeedback: ""
      }
    }
  },
  created() {
    this.getLeaveData();
  },
  methods: {
    //获取数据
    getLeaveData() {
      var userInfo = JSON.parse(window.sessionStorage.getItem("user"));
      var userId = (JSON.parse(userInfo).userId);
      var deptId = JSON.parse(userInfo).dept.deptId
      this.userApproveQuery.dept.deptId = deptId
      var userApprove = this.userApproveQuery
      this.$http.post("/userApprove/list", userApprove).then((res) => {
        console.log(res);
        console.log(res.code)
        if (res.code == 200) {
          this.userApprove = res.data;
        } else {
          this.$message.error("获取数据失败!!!");
        }
      }).catch((err) => {
        console.log(err)
        this.$message.error("获取数据失败!!!");
      });
    },
    approve(e) {
      this.$http.post("userApprove/approve/" + e.userApproveId).then(e => {
        if (e.code == 200) {
          alert("已同意申请")
          this.getLeaveData()
        } else {
          alert("请重新点击")
        }
      })
    },
    unApprove(e) {
      this.disApprove.userApproveId=e.userApproveId
      this.$http.post("userApprove/disApprove",this.disApprove).then(e=>{
        if (e.code==200){
          alert("已拒绝申请")
          this.getLeaveData()
        }else {
          alert("请重新点击")
        }
      })
      this.dialogFormVisible = false
    }
  }
}
</script>

<style scoped>
.el-table >>> .error-row {
  background: #E6A23C;
}

.el-table >>> .success-row {
  background: #61e861;
}

.m-1 {
  width: 15px;
  height: 15px;
  border: 1px solid rgb(230, 162, 60);
  display: inline-block;
  margin-top: 20px;
  margin-left: 35%;
  background-color: rgb(230, 162, 60);
}

.m-2 {
  width: 15px;
  height: 15px;
  border: 1px solid rgb(97, 232, 97);
  display: inline-block;
  margin-top: 20px;
  margin-left: 5%;
  background-color: rgb(97, 232, 97);
}

.m-3 {
  width: 15px;
  height: 15px;
  border: 1px solid black;
  display: inline-block;
  margin-top: 20px;
  margin-left: 5%;
  background-color: rgb(255, 255, 255);
}
</style>
